<template>
	<view class="address-choose">
		<!-- 返回首页 -->
		<uni-bankhome />
		<div class="location-wrapper">
			<div class="title">定位地址</div>
			<view class="list-city">
				<div class="city" @click='choosePosition(form)'>
					<span class="text">{{form.consigneeAddressPath.join(' ')||'--'}}</span>
				</div>
				<div class="city" @click='choosePosition(position,positionState)'>
					<image class="image" src="/static/icon-location.png"></image>
					<span class="text"
						v-if="positionState=='success'">{{position.consigneeAddressPath.join(' ')}}</span>
					<span class="text" v-if="positionState=='refuse'">获取定位失败</span>
					<span class="text" v-if="positionState=='fail'">获取定位失败</span>
					<span class="text" v-if="positionState=='ing'">定位中...</span>
					<u-icon v-if="positionState=='refuse'||positionState=='fail'" class="refresh" name="reload"
						size='32' color="#999999"></u-icon>
				</div>
			</view>
		</div>
		<p-city class="address-position" :provinceData="list" pickerState='0' headTitle="区域选择" ref="cityPicker"
			@funcValue="getpickerParentValue" pickerSize="3">
		</p-city>
	</view>
</template>

<script>
	import amap from '../../../../utils/amap-wx.130.js';
	import storage from "@/utils/storage.js"
	import config from '@/config/config.js'
	import pCity from '@/components/p-city/m-city.vue'
	import {
		GetTrapeze
	} from '@/api/home.js'
	export default {
		data() {
			return {
				currentSelect: {},
				amapPlugin: null,
				cityName: '',
				positionState: 'ing',
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}],
				position: {
					consigneeAddressPath: [], //地址名字
					adCode: 0,
					trapeze: '',
				},
				form: {
					consigneeAddressPath: [], //地址名字
					adCode: 0
				},

			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: config.aMapKey
			});
		},
		onShow() {
			this.getAuthorizeInfo();
		},
		mounted() {
			this.$refs.cityPicker.show();
		},
		components: {
			pCity
		},
		methods: {
			// 三级地址联动回调
			getpickerParentValue(e) {
				let list = e.filter((item) => {
					return !!item.id
				})
				// this.currentSelect = list[list.length - 1]
				// console.log(this.currentSelect)
				// return
				// 将需要绑定的地址设置为空，并赋值
				this.form.consigneeAddressPath = [];
				list.forEach((item, index) => {
					if (item.id) {
						this.form.consigneeAddressPath.push(item.localName);
					}
				});
				this.form.adCode = list[list.length - 1].adCode
				this.form.trapeze = list[list.length - 1].center
				console.log(this.form)
			},
			choosePosition(position, state) {
				if (!position.consigneeAddressPath[position.consigneeAddressPath.length - 1]) {
					this.getAuthorizeInfo();
					return
				}
				uni.showModal({
					title: '',
					content: '是否切换到' + position.consigneeAddressPath[position.consigneeAddressPath.length - 1] +
						'区域',
					success: (res) => {
						if (res.confirm) {
							storage.setMapCode(position)
							uni.navigateBack({})
						} else if (res.cancel) {
							uni.navigateBack({})
						}
					}
				});


			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			getAuthorizeInfo() {
				const that = this;
				that.positionState = 'ing'
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getRegeo();
					},

					fail() { // 拒绝授权
						that.openConfirm();

					}
				})
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				const that = this;
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							that.positionState = 'refuse'
							GetTrapeze().then((res) => {
								if (res.data && res.data.success) {
									storage.setMapCode({
										adCode: res.data.result.adCode,
										consigneeAddressPath: res.data.result.consigneeAddressPath,
										trapeze: res.data.result.trapeze
									})
								}
							})
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})

						}
					}
				});
			},
			getRegeo() {
				const that = this;
				this.amapPlugin.getRegeo({
					success: (data) => {
						that.positionState = 'success'
						var position = data[0].regeocodeData.addressComponent
						this.position.consigneeAddressPath = [position.province, position.city, position
							.district
						];
						this.position.adCode = position.adcode
						this.position.trapeze = [data[0].longitude, data[0].latitude].join(',')
						storage.setAdCode({
							consigneeAddressPath: this.position.consigneeAddressPath,
							adCode: this.position.adCode,
							trapeze: this.position.trapeze
						})
						storage.setMapCode({
							consigneeAddressPath: this.position.consigneeAddressPath,
							adCode: this.position.adCode,
							trapeze: this.position.trapeze
						})
					},
					fail: () => {
						that.positionState = 'fail'
						uni.showToast({
							title: '定位获取失败',
							icon: 'none',
							duration: 1000
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.address-position {
		.mask {
			visibility: hidden !important;
		}

		.cpicker-content {
			position: static !important;
		}

		.city-head {
			display: none !important;
		}

		.panel-scroll-box {
			height: calc(100vh - 360upx) !important;
		}
	}

	.address-choose {
		.location-wrapper {
			padding: 24upx;

			.title {
				color: #999999;
			}

			.list-city {
				display: flex;
				flex-wrap: wrap;
				.city {
					flex: 0 0;
					margin: 24upx;
					height: 56upx;
					border: 2upx solid #666666;
					border-radius: 8upx;
					padding: 0 24upx;
					font-size: 26upx;
					background-color: #00000000;
					display: flex;
					justify-content: center;
					align-items: center;

					.image {
						width: 32upx;
						height: 32upx;
						margin-right: 8upx;
					}

					.text {
						white-space: nowrap;
					}

					.refresh {
						margin-left: 12upx;
					}
				}
			}
		}

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
	}
</style>
